{include file="../application/admin/view/header.html"}
</head>
<body>
<div class="container-fluid">
<div align="center">
	<h3 id="qiestions_title" data-questionID="{$questions_info.id}">{$questions_info.question_name}</h3>
</div>

<div>
	<h4>各仓平均分</h4>
	<div id="average_score" align="center" style="height: 350px;"></div>
</div>

<div>
	<h4>各仓高频率错题统计</h4>
    {volist name="each_warehouse_false" id="warehouse_false"}
	<div>
        <div align="center" style="height: 300px;" id="warehouse{$warehouse_false.id}"></div>
	</div>
    {/volist}
</div>

<div>
	<h4>所有仓错题高频率统计</h4>
    <div align="center" style="height: 300px;" id="total_warehouse_false"></div>
</div>
{include file="../application/admin/view/footer.html"}
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
var average_score = document.getElementById("average_score");
var avgChart = echarts.init(average_score);
var warehouse_avg = {$warehouse_avg};

function getAvgXAxisDate(avgDate){
    var data = new Array;
    for(var key in avgDate){
        data.push(avgDate[key].warehouse_name);
    }
    return data;
}


function getAvgYAxisDate(avgDate){
    var data = new Array;
    for(var key in avgDate){
        data.push(avgDate[key].avg_score);
    }
    return data;
}

avg_option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : getAvgXAxisDate(warehouse_avg),
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'平均分',
            type:'bar',
            barWidth: '60%',
            data:getAvgYAxisDate(warehouse_avg)
        }
    ]
};
;
if (avg_option && typeof avg_option === "object") {
    avgChart.setOption(avg_option, true);
}
</script>
<script type="text/javascript">
    function getPieChart(dom,data,title_text){
        var myChart = echarts.init(dom);
        option = null;
        option = {
            backgroundColor: '#2c343c',

            title: {
                text: title_text,
                left: 'center',
                // top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'错题频率',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:data.sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
</script>
<script type="text/javascript">
   var warehouse_false_data = {$each_warehouse_false_json};
   for(var key in warehouse_false_data){
    var title = warehouse_false_data[key]['warehouse'];
    var warehouse_dom = document.getElementById('warehouse'+warehouse_false_data[key]['id']);
    var _title = warehouse_false_data[key]['warehouse'];
    var pieData = new Array;
    for(var k in warehouse_false_data[key]['questions']){
        var sub_piedata = {};
        sub_piedata['value'] = warehouse_false_data[key]['questions'][k]['false_num'];
        sub_piedata['name'] = warehouse_false_data[key]['questions'][k]['question'];
        pieData.push(sub_piedata);
    }
    getPieChart(warehouse_dom,pieData,_title);
   }
</script>
 <script type="text/javascript">
    var total_false_data = {$total_false};

    function getLendDate(total_false_data){
        var data = new Array;
        for(var key in total_false_data){
            data.push(total_false_data[key]['question']);
        }
        return data;
    }

    function getSeriesDate(total_false_data){
        var data = new Array;
        for(var key in total_false_data){
            var sub_data = {};
            sub_data['name'] = total_false_data[key]['question'];
            sub_data['value'] = total_false_data[key]['false_num'];
            data.push(sub_data);
        }
        return data;
    }
    var total_false_dom = document.getElementById("total_warehouse_false");
    var total_false_chart = echarts.init(total_false_dom);
    total_chart_option = null;
    total_chart_option = {
        title : {
            // text: '所有仓高频率统计',
            // subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
            data:getLendDate(total_false_data)
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'错题频率',
                type:'pie',
                radius : [20, 110],
                center : ['25%', '50%'],
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:getSeriesDate(total_false_data)
            },
            
        ]
    };
    ;
    if (total_chart_option && typeof total_chart_option === "object") {
        total_false_chart.setOption(total_chart_option, true);
    }
</script>
</footer>
</body>
</html>